<template>
    <div>
        <el-container>
            <el-header style="width: 100%;
                        min-width: 1200px;
                        background-color: rgba(7, 158, 30, 0.784);
                        color: #fff;">
                <div class="header-title">
                    <el-tooltip class="item" content="返回首页" placement="bottom">
                        <el-button type="success" plain icon="el-icon-back" @click="jumpToHome" />
                    </el-tooltip>
                    <span>论文管理系统 - 个人信息页</span>
                </div>
            </el-header>
            <el-main style="background-color: #fff;">
                <div class="user-info">
                    <div class="info-list">
                        <el-avatar size="large"
                            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                        <div class="user-info-name">{{ userInfo.name }}</div>
                        <div class="user-info-username">@{{ userInfo.username }}</div>
                        <div class="thesis-details">
                            <div class="detail-list">
                                <span>{{ thesisCount }}</span>
                                <span>论文总数</span>
                            </div>
                            <el-divider direction="vertical"></el-divider>
                            <div class="detail-list">
                                <span>{{ willExamCount }}</span>
                                <span>未审批</span>
                            </div>
                            <el-divider direction="vertical"></el-divider>
                            <div class="detail-list">
                                <span>{{ examedCount }}</span>
                                <span>已审批</span>
                            </div>
                        </div>
                    </div>
                    <div class="info-content">
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="论文概览" name="first">
                                <el-collapse>
                                    <el-collapse-item v-for="item in thesises" :key="item.id" :title="item.name"
                                        :name="item.name">
                                        <el-steps :space="200" :active="item.active" finish-status="success" simple>
                                            <el-step title="已发布" />
                                            <el-step title="待审批" />
                                            <el-step v-if="item.active === 3 && item.examed === '已驳回'" title="已驳回"
                                                status="error" />
                                            <el-step v-else-if="item.active === 3 && item.examed === '已通过'" title="已通过" />
                                            <el-step v-else title="未审批" />
                                        </el-steps>
                                    </el-collapse-item>
                                </el-collapse>
                            </el-tab-pane>
                            <el-tab-pane label="个人信息" name="second">
                                <el-descriptions title="个人信息" border :column="2">
                                    <template slot="extra">
                                        <el-button type="success" plain @click="handleClickChangePass">修改密码</el-button>
                                    </template>
                                    <el-descriptions-item label="姓名">{{ userInfo.name }}</el-descriptions-item>
                                    <el-descriptions-item label="用户名">{{ userInfo.username }}</el-descriptions-item>
                                    <el-descriptions-item label="工号/学号">{{ userInfo.workId }}</el-descriptions-item>
                                    <el-descriptions-item label="学院">{{ userInfo.college }}</el-descriptions-item>
                                    <el-descriptions-item label="职位">
                                        <el-tag size="small" v-if="userInfo.post === 'student'">学生</el-tag>
                                        <el-tag size="small" v-else>教师</el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="用户权限">
                                        <el-tag size="small" type="warning" v-if="userInfo.role === 0">管理员</el-tag>
                                        <el-tag size="small" type="warning" v-else>用户</el-tag>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                            class="demo-ruleForm">

                            <el-form-item label="密码" prop="password">
                                <el-input type="password" show-password v-model="ruleForm.password" autocomplete="off"
                                    clearable />
                            </el-form-item>

                            <el-form-item label="确认密码" prop="checkPass">
                                <el-input type="password" show-password v-model="ruleForm.checkPass" autocomplete="off"
                                    clearable />
                            </el-form-item>

                        </el-form>

                        <span slot="footer" class="dialog-footer">
                            <el-button @click="handleExit">取 消</el-button>
                            <el-button type="success" plain @click="handleSubmit" :loading="editLoading">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>

            </el-main>
        </el-container>
    </div>
</template>

<script>
import apis from '@/utils/api';
import request from '@/utils/requestMethod';
import { Message } from 'element-ui';
import './style.less'

export default {
    name: 'selfInfo',
    mounted() {
        this.getUserInfo()
    },
    data() {
        const validatePassword = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else if (value.length > 20) {
                callback(new Error('密码不能超过20位'));
            } else {
                if (this.ruleForm.checkPassword !== '') {
                    this.$refs.ruleForm.validateField('checkPassword');
                }
                callback();
            }
        };
        const validateCheckPass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            editLoading: false,
            userInfo: {
                name: '',
                workId: '',
                post: '',
                college: '',
                role: '',
                username: '',
                password: ''
            },
            dialogVisible: false,

            newPassword: '',
            checkPassword: '',

            thesisCount: 3,
            willExamCount: 1,
            examedCount: 2,

            activeName: 'first',
            thesises: [
                {
                    name: '基于Vue的XXX',
                    active: 2,
                    examed: '未审批'
                },
                {
                    name: '关于肺支气管XXX',
                    active: 3,
                    examed: '已驳回'
                },
                {
                    name: 'CRUD页面生成系统',
                    active: 1,
                    examed: '未审批'
                }
            ],
            ruleForm: {
                password: '',
                checkPass: ''
            },
            rules: {
                password: [
                    { validator: validatePassword, trigger: 'blur' }
                ],
                checkPassword: [
                    { validator: validateCheckPass, trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        getUserInfo() {
            this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
            const { id } = this.userInfo;

            request(apis.fetchPersonAllThesis + `?id=${id}`).then(res => {
                const {
                    objects
                } = res.data;

                this.thesisCount = objects.length;
                let willExam = 0,
                    examedCount = 0;
                objects.forEach(item => {
                    if (item.examed === '未审批') {
                        willExam++;
                        item.active = 2;
                    } else {
                        examedCount++;
                        item.active = 3;
                    }
                })
                this.willExamCount = willExam;
                this.examedCount = examedCount;
                this.thesises = objects;
            })
        },

        handleClick(tab, event) {
            console.log(tab, event);
        },

        changePoss() {
            const body = {

            }

            request(apis.changePassword, {
                method: 'POST',
                body
            })
        },

        handleClose(done) {
            done();
        },

        /**
         * 点击取消按钮事件
         */
        handleExit() {
            this.dialogVisible = false;
            this.editLoading = false;
        },

        handleSubmit() {
            this.$refs['ruleForm'].validate((valid) => {
                const {
                    ruleForm: {
                        password
                    },
                    userInfo
                } = this;

                if (valid) {
                    userInfo.password = password;
                    const body = userInfo;

                    request(apis.editOrSaveUser, {
                        method: 'POST',
                        body
                    }).then(res => {
                        const {
                            objects,
                            message
                        } = res.data;

                        if (objects.password === password) {
                            Message.success(message);
                            this.dialogVisible = false;
                        }
                    }).finally(() => {
                        this.editLoading = false;
                    }).catch(() => {
                        this.editLoading = false;
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        handleClickChangePass() {
            this.dialogVisible = true
        },

        jumpToHome() {
            this.$router.push('/home/page');
        }
    }
}
</script>